<template>
	<div @dragover.prevent class="sence_com" @drop="(e) => onDrop(e, 'sence_com')">
		<div class="video_con" v-if="currentScene.video?.length">
			<div class="video_item" v-for="(item, index) in currentScene.video" :key="index">
				<div class="operate_con">
					<div class="bottom_con">
						<DeleteOutlined @click="deleteVideo(index)" class="bottom_icon" />
					</div>
				</div>
				<div class="material_image">
					<div class="video_duration">{{ item.material_duration_text }}</div>
					<video v-if="item.material_type != 'image'" :src="item.material_url" alt="" />
					<img v-else :src="item.material_url" alt="" />
				</div>
				<div class="material_name">{{ item.material_name }}</div>
			</div>
		</div>

		<div class="video_con" style="
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			" v-else>
			请从左侧拖入场景视频
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		computed,
		nextTick,
		watch,
	} from "vue";
	import {
		message
	} from "ant-design-vue";
	import {
		DeleteOutlined,
	} from "@ant-design/icons-vue";
	import store from "@/store";
	const INITIAL_MATERIAL_LIST = [{
			edit: false,
			name: "场景1",
			video: []
		}
	];
	export default defineComponent({
		components: {
			DeleteOutlined
		},
		setup(props, context) {
			const state = reactive({
				materialList: [...INITIAL_MATERIAL_LIST],
				currentScene: {},
			});

			watch(
				() => store.getters.clipJSON.resource_data,
				(val) => {
					if (val?.length === 0) {
						state.materialList = [...INITIAL_MATERIAL_LIST];
						return
					}
					state.materialList = val;
					state.currentScene = state.materialList[0];
					context.emit("updateNumber", {
						type: "material",
						count: state.materialList[0]?.video?.length,
					});
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => state.materialList,
				(val) => {
					store.dispatch("SetClipJSONResourceData", val);
				}, {
					deep: true,
					immediate: true
				}
			);
			
			const handleDragStart = (event) => {};

			const deleteVideo = (index) => {
				state.currentScene["video"].splice(index, 1);
				message.success("删除成功！");
			};

			const onDrop = (e, type) => {
				e.preventDefault(); // 阻止浏览器默认行为
				if (
					!(
						dragStatus.value.element?.scene_type == "video" ||
						dragStatus.value.element?.material_type == "video" ||
						(dragStatus.value.element?.material_type == "image" &&
						 dragStatus.value.element?.material_extension != "gif")
					)
				) {
					return;
				}
				let arr = state.materialList[0]["video"];
				let arrId = state.materialList[0]["video"].map(
					(item) => item.id
				);
				let flag_1 = false,
					flag_2 = false;
				dragStatus.value.materialList.map((item) => {
					if (item.checked && arrId.indexOf(item.id) != -1) {
						flag_1 = true;
					}
					if (item.checked && arrId.indexOf(item.id) == -1) {
						flag_2 = true;
						if (item?.material_type == "image") {
							item.material_duration_text = "00:05";
							item.material_duration = 5000;
						}
						arr.push(item);
					}
				});
				state.materialList[0]["video"] = arr;
				state.currentScene = state.materialList[0];
				context.emit("updateNumber", {
					type: "material",
					count: arr.length,
				});
				if (flag_1) {
					message.success("部分素材重复添加，已自动剔除！");
				}
				if (!flag_1 && flag_2) {
					message.success("操作成功！");
				}
				dragStatus.value?.callback();
			};

			const dragStatus = computed(() => store.getters.dragStatus);

			return {
				...toRefs(state),
				onDrop,
				dragStatus,
				deleteVideo,
				handleDragStart,
			};
		},
	});
</script>

<style lang="less" scoped>
	.sence_com {
		width: 100%;
		height: 100%;

		.video_con {
			height: 100%;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.video_item {
				width: 83px;
				height: 113px;
				cursor: pointer;
				flex-shrink: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				margin-top: 10px;
				position: relative;
				margin-left: 20px;

				.operate_con {
					position: absolute;
					display: none;
					left: 0;
					top: 0;
					padding: 20px;
					width: 100%;
					height: 100%;
					z-index: 99;

					.bottom_con {
						position: absolute;
						left: 0;
						bottom: 30px;
						width: 100%;
						height: 20px;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.bottom_icon {
							margin-right: 5px;

							&:hover {
								color: #2878FF;
							}
						}
					}
				}

				&:hover {
					.operate_con {
						display: block;
					}
				}

				// 图片
				.material_image {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 83px;
					background-color: rgba(0, 0, 0, 0.8);
					position: relative;
					border-radius: 5px;
					border: 1px solid rgba(0, 0, 0, 0.8);
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					.video_duration {
						position: absolute;
						right: 3px;
						top: 0px;
						color: #fff;
					}

					video {
						max-height: 100%;
						max-width: 100%;
					}

					img {
						max-height: 100%;
						max-width: 100%;
					}
				}

				.material_name {
					margin-top: 7px;
					font-size: 12px;
					display: inline-block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 80%;
					max-width: 140px;
					text-align: center;
				}
			}
		}
	}
</style>